<template>
  <el-container class="main">
    <!---header-->
    <el-header>
      <div class="filter-container">
        <el-input
          v-model="listQuery.title"
          placeholder="请输入用户名称"
          style="width: 200px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          class="filter-item seachbttn"
          type="primary"
          icon="el-icon-search"
          @click="seachFilter"
        >查询</el-button>
      </div>
      <div class="filter_fenge"  style="border:none;border-top: 1px solid #d1ddeb;" />
      <div class="filter-container">
        <el-button
          class="filter-item bttnleft"
          type="primary"
          @click="moduleCreate"
        >
          <i class="el-icon-plus" />&nbsp;添加模块
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="moduleUpdate"
        >编辑模块</el-button>
        <el-button
          class="filter-item"
          type="primary"
          @click="handleCreate_menu"
        >
          <i class="el-icon-plus" />&nbsp;添加菜单
        </el-button>
        <el-button class="filter-item" type="danger" @click="moduleDelete">
          <i class="el-icon-delete" />&nbsp;删除模块
        </el-button>
        <el-button class="filter-item" type="danger" @click="handleDelete_menu">
          <i class="el-icon-delete" />&nbsp;删除菜单
        </el-button>
      </div>
    </el-header>
    <!---header-->

    <!--content-->
    <el-container style="margin-top: 60px !important">
      <el-aside width>
        <el-table
          ref="singleTable"
          :data="list"
          :load="load"
          class="moduletabe"
          row-key="id"
          lazy
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          highlight-current-row
          @row-click="modulerowClick"
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="moduleName" label="模块名称" width="200">
            <template slot-scope="{ row }">
              <el-radio
                v-if="!row.hasChildren"
                v-model="radio"
                :label="row.id"
              >{{ row.moduleName }}</el-radio>
              <span v-if="row.hasChildren">{{ row.moduleName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="moduleCls" label="模块样式" />
          <el-table-column
            label="Actions"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          />
        </el-table>
      </el-aside>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="actionLst"
          class="actiontable"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column type="selection" width="55" />
          <el-table-column label="功能名称" width="180">
            <template slot-scope="{ row }">
              <span class="link-type" @click="handleUpdate_menu(row)">
                {{ row.actionName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="actionUrl"
            label="功能地址"
            width="auto"
          />
          <el-table-column
            prop="actionCls"
            label="功能样式"
            width="180"
          />
          <el-table-column prop="actionFun" label="JS函数" />
        </el-table>
        <pagination
          v-show="listQuery.total > 0"
          :total="listQuery.total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          class="pagination"
          @pagination="fetchData(this)"
        />
      </el-main>
    </el-container>

    <!--content-->

    <!--弹出层 模块-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :show-close="false"
     
    >
      <el-form :model="form">
        <el-form-item label="模块名称" :label-width="formLabelWidth">
          <el-input v-model="form.moduleName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="父级模块" :label-width="formLabelWidth">
          <el-select
            v-model="form.pid"
            style="width: 100%"
            class="filter-item"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span v-html="item.label" />
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块样式" :label-width="formLabelWidth">
          <el-input v-model="form.moduleCls" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.orderID" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveModuleForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹出层 菜单-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogmenuVisible"
      width="40%"
      :before-close="handleClose"
      :show-close="false"
       class="dialog-title"
    >
      <el-form
        ref="menu_form"
        :model="menu_form"
        label-width="100px"
        class="demo-dynamic"
        size="small"
        :label-position="labelPosition"
      >
        <el-form-item label="功能名称">
          <el-input
            v-model="menu_form.actionName"
            placeholder="功能名称"
          />
        </el-form-item>
        <el-form-item label="功能地址">
          <el-input
            v-model="menu_form.actionUrl"
            placeholder="功能地址"
          />
        </el-form-item>
        <el-form-item label="功能样式">
          <el-input
            v-model="menu_form.actionCls"
            placeholder="功能样式"
          />
        </el-form-item>
        <el-form-item label="功能方法名">
          <el-input
            v-model="menu_form.actionFun"
            placeholder="功能方法名"
          />
        </el-form-item>

        <el-form-item label="所属模块">
          <el-select
            v-model="menu_form.moduleID"
            style="width: 40%"
            class="filter-item"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span v-html="item.label" />
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogmenuVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenuForm">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Vue from 'vue'
import { debuglog } from 'util'
import { AjaxToken } from '@/api/common'
import { SelectAjax } from '@/api/common'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import selectcust from '@/components/Custom/select/select'
import { delimiter } from 'path'
import 'url-search-params-polyfill'
export default {
  name: 'Module',
  components: { Pagination, selectcust },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    const ModuleName = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入模块'))
      } else {
        callback()
      }
    }
    const ModuleCls = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      multipleSelection: [],
      currentRow: null,
      itemId: '',
      ModuleId: '',
      labelPosition: 'right',
      options: null,
      value: '',
      radio: '0',
      selecturl: '',
      list: null,
      actionLst: null,
      listQuery: {
        textarea: '',
        total: 0,
        page: 1,
        limit: 10
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogmenuVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      form: {
        id: '',
        moduleCls: '',
        moduleName: '',
        moduleUrl: '',
        pid: '',
        orderID: 0
      },
      menu_form: {
        id: '',
        moduleID: '',
        actionName: '',
        actionUrl: '',
        actionCls: '',
        actionFun: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.loadmodulelst()
    this.fetchData()
    this.selectload(this)
  },
  methods: {
    handleClose() {},
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    loadmodulelst() {
      var params = new URLSearchParams()
      params.append('PID', '00000000-0000-0000-0000-000000000000')
      modules.GetmoduleLst(this, params)
    },
    load(tree, treeNode, resolve) {
      // 获取子模块
      this.listLoading = true
      var params = new URLSearchParams()
      params.append('PID', tree.id)
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      var thisobj = this
      AjaxToken(thisobj, 'GetModuleListByPid', params, 'post', function(data) {
        var body = data.data.data
        resolve(body.rows)
        thisobj.listLoading = false
      })
    },
    fetchData() {
      var params = new URLSearchParams()
      params.append('ModuleId', this.ModuleId)
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      modules.GetSysModuleActionLst(this, params)
    },
    // 加载下拉
    selectload(thisobj) {
      SelectAjax(
        'GetFatherModuleSelect?fatherId=' +
          thisobj.itemId +
          '&itemId=' +
          thisobj.itemId +
          '',
        function(response) {
          var body = response.data
          thisobj.options = []
          body.data.forEach((element) => {
            thisobj.options.push({ value: element.value, label: element.text })
          })
        },
        function(error) {}
      )
    },
    // 查询
    seachFilter() {
      this.loadmodulelst()
      this.fetchData()
      this.selectload(this)
    },
    // 修改模块
    moduleUpdate() {
      if (this.currentRow == null) {
        this.$message({
          showClose: true,
          message: '请至少选中一行',
          type: 'error'
        })
      } else {
        this.dialogStatus = 'update'
        var params = new URLSearchParams()
        params.append('Id', this.currentRow.id)
        modules.GetmoduleById(this, params)
        this.dialogFormVisible = true
      }
    },
    // 添加模块
    moduleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    moduleDelete() {
      if (this.currentRow == null) {
        this.$message({
          showClose: true,
          message: '请至少选中一行',
          type: 'error'
        })
      } else {
        var self = this
        var params = new URLSearchParams()
        params.append('Id', this.currentRow.id)
        AjaxToken(this, 'DeleteSysModule', params, 'post', function(response) {
          var body = response.data
          if (body.success) {
            self.$message({
              showClose: true,
              message: body.message,
              type: 'success',
              duration: 2000
            })
            self.loadmodulelst()
          } else {
            self.$message({
              showClose: true,
              message: body.message,
              type: 'error'
            })
          }
        })
      }
    },
    // 模块行点击事件
    modulerowClick(row) {
      this.radio = row.id
      this.ModuleId = row.id
      var params = new URLSearchParams()
      params.append('ModuleId', row.id)
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      modules.GetSysModuleActionLst(this, params)
    },
    // 保存模块
    saveModuleForm() {
      var self = this
      var params = new URLSearchParams()
      params.append('ID', this.form.id)
      params.append('PID', this.form.pid)
      params.append('ModuleName', this.form.moduleName)
      params.append('ModuleCls', this.form.moduleCls)
      params.append('OrderID', this.form.orderID)
      AjaxToken(this, 'AddSysModule', params, 'post', function(response) {
        var body = response.data
        self.form = {
          id: '',
          moduleCls: '',
          moduleName: '',
          moduleUrl: '',
          pid: ''
        }
        if (body.success) {
          self.$message({
            showClose: true,
            message: body.message,
            type: 'success',
            duration: 2000
          })
          self.loadmodulelst()
          self.dialogFormVisible = false
        } else {
          self.$message({
            showClose: true,
            message: body.message,
            type: 'error'
          })
        }
      })
    },
    // 添加菜单
    handleCreate_menu() {
      this.dialogStatus = 'create'
      this.dialogmenuVisible = true
    },
    // 编辑菜单
    handleUpdate_menu(row) {
      this.dialogStatus = 'update'
      var params = new URLSearchParams()
      params.append('Id', row.id)
      this.itemId = row.moduleID
      modules.GetSysModuleActionById(this, params)
      this.dialogmenuVisible = true
    },
    // 删除菜单
    handleDelete_menu() {
      var arr = this.multipleSelection
      if (arr == undefined || arr.length <= 0) {
        this.$message({
          showClose: true,
          message: '请至少选中一行',
          type: 'error'
        })
      } else {
        var self = this
        const multis = []
        for (var i = 0; i < arr.length; i++) {
          multis.push(arr[i].id)
        }
        var ids = JSON.stringify(multis)
        var params = new URLSearchParams()
        params.append('ids', ids)
        AjaxToken(
          this,
          'DeleteSysModuleAction',
          params,
          'post',
          function(response) {
            var body = response.data
            if (body.success) {
              self.$message({
                showClose: true,
                message: body.message,
                type: 'success'
              })
              self.fetchData()
            } else {
              self.$message({
                showClose: true,
                message: body.message,
                type: 'error'
              })
            }
          }
        )
      }
    },
    // 保存菜单
    saveMenuForm() {
      var self = this
      if (
        this.menu_form.moduleID == '' ||
        this.menu_form.moduleID == undefined
      ) {
        self.$message({
          showClose: true,
          message: '请选择所属模块',
          type: 'error'
        })
      } else {
        var params = new URLSearchParams()
        params.append('ID', this.menu_form.id)
        params.append('ModuleID', this.menu_form.moduleID)
        params.append('ActionName', this.menu_form.actionName)
        params.append('ActionUrl', this.menu_form.actionUrl)
        params.append('ActionCls', this.menu_form.actionCls)
        params.append('ActionFun', this.menu_form.actionFun)
        AjaxToken(this, 'AddSysModuleAction', params, 'post', function(data) {
          var body = data.data
          self.menu_form = {
            id: '',
            moduleID: '',
            actionName: '',
            actionUrl: '',
            actionCls: '',
            actionFun: ''
          }
          if (body.success) {
            self.$message({
              showClose: true,
              message: body.message,
              type: 'success',
              duration: 2000
            })
            self.fetchData()
            self.dialogmenuVisible = false
          } else {
            self.$message({
              showClose: true,
              message: body.message,
              type: 'error'
            })
          }
        })
      }
    }
  }
}
// 后台事件
var modules = {
  GetmoduleLst: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetModuleLst',
      params,
      'post',
      function(res) {
        thisobj.listLoading = false
        var body = res.data.data
        thisobj.list = body.rows
      },
      function(err) {}
    )
  },
  GetmoduleById: function(thisobj, params) {
    AjaxToken(thisobj, 'GetmoduleById', params, 'post', function(res) {
      var body = res.data.data
      thisobj.form = body
    })
  },
  GetSysModuleActionLst: function(thisobj, params) {
    AjaxToken(thisobj, 'GetSysModuleActionLst', params, 'post', function(res) {
      var body = res.data.data
      thisobj.actionLst = body.rows
      thisobj.listQuery.page = body.page
      thisobj.listQuery.total = body.records
    })
  },
  GetSysModuleActionById: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetSysModuleActionById',
      params,
      'post',
      function(res) {
        var body = res.data.data
        thisobj.menu_form = body
        thisobj.itemId = body.moduleID
        thisobj.selectload(thisobj)
      }
    )
  }
}
</script>

<style lang="scss" scoped>
.main{
  padding-top: 10px;
}

.el-header {
  line-height: 30px;
}

.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  text-align: center;
}

.el-aside {
  // background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: auto;
  margin-bottom: 0px;
  padding: 10px 10px;
  width: 35%;
}

.el-main {
  // background-color: #d3dce6;
  color: #333;
  text-align: center;
  padding: 10px 10px;
  height: auto;
  min-height: 765px;
}

body > .el-container {
  margin-bottom: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.actiontable {
  width: 100%;
  height: 100%;
  max-height: 660px;
  overflow: auto;
}
.moduletabe {
  width: 100%;
  height: 100%;
  max-height: 745px;
  overflow: auto;
}
.pagination {
  width: 100%;
  background-color: white;
  height: 85px;
  padding-top: 25px !important;
  margin-top: inherit;

}
// .aa .el-dialog__title{
//   color: yellowgreen !important;
// }

</style>
